<template>
	<view class="content">
		<view class="header" @click="getuserinfo">
			<view class="header-logo">
				<image :src="userInfo.avatar" mode=""></image>
			</view>
			<view class="text-box" style="margin-top: 5rpx;">
				<text>{{userInfo.nickname}}</text>
				<image v-if="flag" src="/static/member.png" style="width: 30rpx; height: 30rpx;margin-left: 8rpx;">
				</image>
			</view>
			<text v-if="flag" style="color: #F0AD4E;font-size: 14px; margin-top: 5rpx;">{{date}}到期</text>
		</view>
		<view class="card">
			<view class="card-box" v-for="(item,index) in cardList" :key="index" @click="btn_click(item.page)">
				<image :src="item.icon" class="icon-img"></image>
				<text class="card-box-text">{{item.title}}</text>
			</view>
		</view>
		<view class="outbox">
			<uni-list>
			    <uni-list-item title="会员卡" thumb="/static/my/vip.png" showArrow clickable="true" link to="/pages/mymember/mymember"></uni-list-item>
			    <uni-list-item title="我的求购" thumb="/static/my/qg.png"  showArrow clickable="true" link to="/pages/typeSource/typeSource?title=我的求购&purchase_type=1"></uni-list-item>
			    <uni-list-item title="我的求租" thumb="/static/my/qz.png"  showArrow clickable="true" link to="/pages/typeSource/typeSource?title=我的求租&purchase_type=2"></uni-list-item>
			    <uni-list-item title="浏览记录" thumb="/static/my/ll.png"  showArrow clickable="true" link to="/pages/record/record"></uni-list-item>
			    <uni-list-item title="房源收藏" thumb="/static/my/sc.png"  showArrow clickable="true" link to="/pages/collection/collection"></uni-list-item>
			    <uni-list-item title="申请入驻" thumb="/static/my/rz.png"  showArrow clickable="true" link to="/pages/formSettled/formSettled"></uni-list-item>
			    <!-- <uni-list-item title="关于我们" thumb="/static/my/wm.png"  showArrow clickable="true" link to="/pages/mymember/mymember"></uni-list-item>
			    <uni-list-item title="订阅中心" thumb="/static/my/dy.png"  showArrow clickable="true" link to="/pages/mymember/mymember"></uni-list-item> -->
			</uni-list>
		</view>
		<view class="copyright-box">
			<image src="/static/copyright.png"></image>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				src: 'https://img0.baidu.com/it/u=964231911,1680605089&fm=26&fmt=auto',
				text: '游客账号',
				date: '2020-09-06',
				flag: false,
				cardList: [{
						id: 1,
						icon: '/static/home/bgf.png',
						title: '我的出售',
						page:'/pages/typeInfo/typeInfo?title=我的出售&house_type=1'
					},
					{
						id: 2,
					},
					{
						id: 3,
						icon: '/static/fabu/chuzu.png',
						title: '我的出租',
						page:'/pages/typeInfo/typeInfo?title=我的出租&house_type=2'
					}
				]
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad() {

		},
		methods: {
			...mapMutations(['login']),
			getuserinfo() {
				let that = this;
				uni.getUserProfile({
					desc: "展示用户信息",
					success(res) {
						console.log(res)
						uni.login({
							onlyAuthorize:true,
							success(ret) {
								that.http("applet_update_member_info", {
									avatar: res.userInfo.avatarUrl,
									nickname: res.userInfo.nickName,
									sex: '男',
									city: res.userInfo.city,
									province: res.userInfo.province,
									iv: res.iv,
									encryptedData: res.encryptedData,
									code: ret.code
								}).then(res => {
									if (res.ec == 200) {
										uni.showToast({
											title: "同步成功",
											success() {
												that.http('applet_member_info', {
													slient: 1,
													code: res.code
												}).then(ret => {
													console.log(ret.data)
													that.login(ret.data);
												})
											}
										})
									}
								})

							}
						})

					}
				})
			},			
			btn_click(url) {
				if (!this.hasLogin) {
					uni.showToast({
						title: "请先登录",
						icon: "error"
					})
				}
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.bgc-img {
		with: 100%;
		height: 300rpx;

		image {
			width: 100%;
			opacity: 1;
			position: relative;
			z-index: -1;
		}
	}

	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.header-logo {
			width: 180rpx;
			height: 180rpx;
			border-radius: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.card {
		display: flex;
		background-color: #fff;
		width: 90%;
		height: 170rpx;
		margin: auto;
		margin-top: 20rpx;
		justify-content: space-around;
		align-items: center;
		border-radius: 20rpx;
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

		.card-box {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;

			.icon-img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		}

		.card-box:nth-child(2) {
			width: 1px;
			height: 85%;
			background-color: #d8d8d8;
		}

		.card-box-text {
			margin-top: 10rpx;
			font-size: 28rpx;
			font-weight: 400;
		}

	}

	.outbox {
		margin-top: 40rpx;
		padding: 0 20px;

		.list:nth-child(5) {
			border-bottom: none
		}

		.list:nth-child(6) {
			border-bottom: none;
			height: 50rpx
		}

		.list:nth-child(9) {
			border-bottom: none
		}

		.list {
			width: 100%;
			height: 120rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #BBBCBE;

			.list-left {
				width: 50%;
				height: 120rpx;
				display: flex;
				align-items: center;

				image {
					margin-right: 16rpx;
					width: 60rpx;
					height: 60rpx;
				}
			}

			.list-right {
				width: 50%;
				height: 120rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}

	.copyright-box {
		margin-top: 20px;
		width: 100%;
		height: 52rpx;
		text-align: center;

		image {
			width: 70%;
			height: 52rpx;
		}
	}
</style>
